<template>
  <div class="bcv-right">
		<div class="bcvr-title">
			<div class="bcvr-left">{{menuChildName}}</div>
			<div class="bcvr-right">首页>{{menuName}}</div>
		</div>
		<div v-show="showList">
			<div style="display:table;">
				<div :class="jobId == item.id?'bcvr-content active' : 'bcvr-content'" v-for="(item,index) in menuChildContent" :key="index" v-html="item.position" @click="changeJob(index)">
				</div>
			</div>
			<div class="bcvr-email">
				<div class="bcvre-left">
					<img src="@/assets/images/recruit-icon.png">
				</div>
				<div class="email-text">
					<p>有意者请发简历至：hr@lmcity.cn 请在邮件主题中注明：应聘XX职位</p>
					<p>欢迎爱岗敬业、注重团队合作、善于沟通，能适应在压力和快节奏环境中工作的创业型精英加入！</p>
				</div>
			</div>
			<div class="position-main">
				<ul>
					<li>
						<dl>
							<dt>岗位职责</dt>
							<div v-html="activeJob.requirement">
							</div>
						</dl>
						<dl>
							<dt>任职要求</dt>
							<div v-html="activeJob.duty">
							</div>
						</dl>
						<dl>
							<dt>工作地点</dt>
							<dd>{{activeJob.workplace}}</dd>
						</dl>
						<dl>
							<dt>薪资</dt>
							<dd>{{activeJob.salary}}</dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import 	News 		from "@/service/news-service.js";
	import 	Menu 		from "@/service/menu-service.js"
	const 	_menu 	= 		new Menu();
	const 	_news 		=	  new News();
	export default {
	  	name: 'NavRight',
	  	props:['menuName','menuId'],
	  	data :function() {
		    return {
				menChildId		: "",
		    	jobId 			: "",
		    	menuChildName			: "",
		    	menuChildContent		: {},
					childMenu				: {},
					activeJob				:{},
					showList				:false
		    }
	  	},
	  	watch: {
		    $route( to , from ){  
				if( this.$route.params.id!=null ){
					this.findJonInfo(this.$route.params.id);
				}
				else{
					this.findMenuChild(this.menuId);
				}
				
			}
		},
		created (){
			if( this.$route.params.id!=null ){
				this.findJonInfo(this.$route.params.id);
			}
			else{
				this.findMenuChild(this.menuId);
			}
		},
		components:{
			
		},
		methods:{
		  	findMenuChild(id){
				_menu.menuListById({'pid':id}).then((res)=>{
					this.findJonInfo(res.data[0].id)
				},(errMsg)=>{
					console.log(errMsg);
				})
			},
			findJonInfo(id){
				_news.jobList({'pid': id}).then((res)=>{
					if(res.data.length != 0){
						this.menuChildContent 	= res.data;
						this.activeJob			= res.data[0]
						this.jobId				= res.data[0].id
						this.showList =true;
					}
					else{
						this.showList =false;
					}
					
				},(errMsg)=>{
					console.log(errMsg);
				})
			},
			changeJob(id){
				this.activeJob = this.menuChildContent[id];
				this.jobId				= this.activeJob.id
			}
	 	}	
	}
</script>

<style scoped lang="less">
	.bcv-right{
		width: 74%;
		float: left;
		padding: 14px 35px 66px 35px;
		border-left: 1px solid #e6e6e6;
		.bcvr-title{
			width:100%;
			display:table;
			border-bottom: 1px solid #e2e2e2;
			.bcvr-left{
				float: left;
				padding-bottom: 14px;
				border-bottom: 3px solid #C62E25;
			}
			.bcvr-right{
				float: right;
				color: #999;
				font-size:14px;
			}
		}
		.bcvr-content{
			color: #666;
			float: left;
			padding: 30px 20px 10px 20px;
			cursor: pointer;
		}
		.active{
			border-bottom: 5px solid #c62e25;
		}
		.bcvr-email{
			margin-top: 60px;
			padding: 30px 0;
			border-top: 1px solid #e6e9ed;
			border-bottom: 1px solid #e6e9ed;
			.bcvre-left{
				float: left;
				margin-right: 30px;
			}
			.email-text{
				font-size: 14px;
				color: #666;
				overflow: hidden;
			}
		}
		.position-main{
			li{
				display: block;
				dl{
					margin-top: 50px;
				}
				dt{
					font-size: 18px;
					font-weight: bold;
					line-height: 36px;
				}
				
			}
		}
	}
</style>